草庐IT

Foundation 侧边栏

全部标签

html - 如何创建滚动或静态侧边栏菜单

我正在寻找有关如何制作侧边栏菜单(如此URL所示的菜单)的编程帮助:NettutsWebsiteLink我希望我的侧边栏能像网站上的侧边栏一样工作,并应用我自己的外观和感觉。我希望侧边栏滚动时页面固定在它自己的位置,就像它在Nettuts网站上一样。我该如何编程? 最佳答案 它是一个div,在css类声明中带有css语句position:fixed;。给你的html中的任何div这个CSS样式,你应该会看到它工作。position:fixed;height:132px;left:0;top:185px;width:24px;

html - 如何将剩余宽度应用于具有特定宽度的div旁边的侧边栏

我打算做的是跟随。我有一个div#sidebar在右边有特定的宽度。此侧边栏div位于右侧。我现在要做的是将剩余的宽度应用到侧边栏左侧的另一个div#left。但是它不能正常工作,因为侧边栏div下的div。我希望div到侧边栏的边距为100%宽度。不是整个侧面。我做了一张图片来更好地解释它:以下是我目前拥有的CSS:#sidebar{height:100%;width:342px;float:right;}#left{float:left;width:100%;height:100%;}希望你明白我的意思。谢谢 最佳答案 您完全可

html - 如何将剩余宽度应用于具有特定宽度的div旁边的侧边栏

我打算做的是跟随。我有一个div#sidebar在右边有特定的宽度。此侧边栏div位于右侧。我现在要做的是将剩余的宽度应用到侧边栏左侧的另一个div#left。但是它不能正常工作,因为侧边栏div下的div。我希望div到侧边栏的边距为100%宽度。不是整个侧面。我做了一张图片来更好地解释它:以下是我目前拥有的CSS:#sidebar{height:100%;width:342px;float:right;}#left{float:left;width:100%;height:100%;}希望你明白我的意思。谢谢 最佳答案 您完全可

javascript - 使用自定义汉堡包按钮使用 jQuery 触发 MDBootstrap 侧边导航

这工作正常:http://jsfiddle.net/musicformellons/ef76gud7/现在我想使用MDBootstrap而不是Bootstrap,所以我必须更改此jQuery代码:$(document).ready(function(){$('#navbar').on('show.bs.collapse',function(){$('#nav-icon4').addClass('open');});$('#navbar').on('hide.bs.collapse',function(){$('#nav-icon4').removeClass('open');});})

javascript - 使用自定义汉堡包按钮使用 jQuery 触发 MDBootstrap 侧边导航

这工作正常:http://jsfiddle.net/musicformellons/ef76gud7/现在我想使用MDBootstrap而不是Bootstrap,所以我必须更改此jQuery代码:$(document).ready(function(){$('#navbar').on('show.bs.collapse',function(){$('#nav-icon4').addClass('open');});$('#navbar').on('hide.bs.collapse',function(){$('#nav-icon4').removeClass('open');});})

html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

我正在尝试使用foundation6创建一个非Canvas;这个想法是我有两个基本的列应用程序,然后我尝试仅在屏幕较小时使用Canvas外效果隐藏左侧的一个,但首先我需要让它工作:第2列显示完整屏幕宽度和第一列这应该只在屏幕上激活。在桌面屏幕上应该只在一个屏幕上显示两列。想法是要有内容,而不仅仅是基础示例中的菜单。怎样才能达到描述的效果?×检查这段代码:https://jsfiddle.net/q1e45fzz/16/ 最佳答案 为了让Canvas外部分默认显示在更宽的屏幕上,您需要向Canvas外区域添加一个“reve

html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

我正在尝试使用foundation6创建一个非Canvas;这个想法是我有两个基本的列应用程序,然后我尝试仅在屏幕较小时使用Canvas外效果隐藏左侧的一个,但首先我需要让它工作:第2列显示完整屏幕宽度和第一列这应该只在屏幕上激活。在桌面屏幕上应该只在一个屏幕上显示两列。想法是要有内容,而不仅仅是基础示例中的菜单。怎样才能达到描述的效果?×检查这段代码:https://jsfiddle.net/q1e45fzz/16/ 最佳答案 为了让Canvas外部分默认显示在更宽的屏幕上,您需要向Canvas外区域添加一个“reve

html - 使用 Zurb foundation 4 在导航栏中为站点标题/ Logo 添加图像/图标

我正在为一个元素使用Foundation,我试图在左上角的“SITENAME”之前添加一个小图标。我试过这个css:.top-bar.nameh1a:before{background-image:url('images/logo.png');background-size:18px18px;background-repeat:no-repeat;}但是好像不行。图片路径正确。这是html:SITENAME如何在不侵入foundation.css的情况下添加简单的图标/图像? 最佳答案 如果你打算使用伪元素来显示图像,你需要设置co

html - 使用 Zurb foundation 4 在导航栏中为站点标题/ Logo 添加图像/图标

我正在为一个元素使用Foundation,我试图在左上角的“SITENAME”之前添加一个小图标。我试过这个css:.top-bar.nameh1a:before{background-image:url('images/logo.png');background-size:18px18px;background-repeat:no-repeat;}但是好像不行。图片路径正确。这是html:SITENAME如何在不侵入foundation.css的情况下添加简单的图标/图像? 最佳答案 如果你打算使用伪元素来显示图像,你需要设置co

css - 如何将边栏对齐到主要内容区域的左侧?

大家好,基本上我有一个非常简单的布局,带有一个标题图像,一个主要居中的文本区域。以及位于主要居中文本区域左侧的侧边栏。这基本上是我的布局的样子:HeaderSidebarMainArea侧边栏显然会一直对齐到页面的左侧,我希望它做的仍然是在页面的左侧,但我希望它“拥抱”主页面中心区域。这是现在的基本图片,以及我希望发生的事情的箭头:http://img18.imageshack.us/img18/2307/exampleps.jpg 最佳答案 现场演示:http://jsfiddle.net/rRm7k/HTML:HEADERSID